<!--  -->
<template>
    <div class="Activepage">
        <div class="row">
            <ul class="pagination">
                <li
                    class="prev"
                >
                    <span v-if="currentPage != 1"  @click="cur--, pageclick()">上一页</span>
                    <span v-else class="no-next">上一页</span>
                </li>
                <li
                    v-for="(index,i) in indexs"
                    :key="i"
                    :class="['item',{ active: currentPage == index }, index =='...'?'omit':'']"
                    @click="btnclick(index, $event)"
                >
                    {{ index }}
                </li>
                <li
                    class="next"
                >
                    <span v-if="currentPage != pages" @click="cur++, pageclick()">下一页</span>
                    <span v-else  class="no-next">下一页</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: ["pageSize", "currentPage", "total", "onPage"],
    data() {
        return {
            cur: this.currentPage,
            showPages:[]
        };
    },
    methods: {
        // 点击li的事件
        btnclick(index, event) {
            // 传值给父组件的方法
            if(index == '...') return;
            this.$emit("onPage", index);
            // 让当前值相等
            if (index != this.cur) {
                this.cur = index;
            }
        },
        // 点击上一页，下一页事件
        pageclick() {
            if (this.cur < 1) {
                this.cur = 1;
            } else if (this.cur > this.pages) {
                this.cur = this.pages;
            }
            this.$emit("onPage", this.cur);
        },
    },
    
    computed: {
        pages(){
            if (!this.total) return 1;
            return Math.ceil(this.total / this.pageSize);
        },
        indexs() {
            let arr = [];
            let p = this.currentPage;
            console.log(this.pages)
            // 展示底部的分页一直有5个
            if (this.pages > 5) {
                if (p > 3 && p < this.pages - 2) {
                    arr = [1,'...',p-1,p,p+1,'...',this.pages]
                } else {
                    if (p <= 3) {
                        arr = [1,2,3,4,'...',this.pages]
                    } else {
                        arr = [1,'...',this.pages-3,this.pages-2,this.pages-1,this.pages]
                    }
                }
            }else {
                let k=1
                while (k <= this.pages) {
                    arr.push(k);
                    k++
                }
            }
            console.log(arr)
            return arr;
        },
    },
};
</script>
<style lang="scss" scoped>
.Activepage {
    color: #fff;
    text-align: center;
    .row {
        text-align: center;
        display: inline-flex;
        .pagination {
            display: inline-block;
            li {
                display: inline-block;
                font-size: 18px;
                margin: 10px;
                
                &.prev,
                &.next {
                    color: #666;
                    cursor: pointer;
                }
                .no-next{
                    color: #999;
                }
                &.item {
                    // width: 26px;
                    cursor: pointer;
                    height: 26px;
                    line-height: 26px;
                    //   text-align: center;
                    border: 1px solid #ccc;
                    color: #666;
                    padding: 0 8px;
                    &.active {
                        color: #2C7EFF;
                        border: 1px solid #2c7eff;
                    }
                    &.omit {
                        margin: 0;
                        border: none
                    }
                }
            }
        }
    }
}
</style>
